<template>
  <div class="problems-center-wrapper">
    
    <el-card class="block-card">
      <div class="page-header">
        <h2 class="page-title">题库</h2>
      </div>
    <div class="problems-toolbar">
      <div class="problems-toolbar-left">
        <el-input v-model="search" size="small" placeholder="标题" style="width: 180px; margin-right: 8px;" @keyup.enter.native="handleSearch" />
        <el-button type="primary" size="small" icon="el-icon-search" @click="handleSearch">查找</el-button>
      </div>
      
    </div>
      <el-table :data="problems" class="only-bottom-border-table" style="width: 100%;" :show-header="true" :border="false" v-loading="loading">
        <el-table-column prop="id" label="编号" width="80" />
        <el-table-column prop="title" label="标题">
          <template slot-scope="scope">
            <a style="color:#13c2c2; text-decoration: none;" href="javascript:void(0)" @click="goToProblem(scope.row.id)">{{ scope.row.title }}</a>
            <el-tag v-if="scope.row.difficulty === 1" size="mini" type="success" style="margin-left:4px;">简单</el-tag>
            <el-tag v-else-if="scope.row.difficulty === 2" size="mini" type="warning" style="margin-left:4px;">中等</el-tag>
            <el-tag v-else-if="scope.row.difficulty === 3" size="mini" type="danger" style="margin-left:4px;">困难</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="category_name" label="分类" />
        <el-table-column prop="stat" label="正确(人数)/已提交(正确率)">
          <template slot-scope="scope">
            <span>{{ formatStats(scope.row.stats) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <PageCom 
        :total="total" 
        :pageSize="pageSize"
        :currentPage="currentPage"
        @handleCurrentChange="handlePageChange"
        @handleSizeChange="handlePageSizeChange"
      />
    </el-card>
    
  </div>
</template>

<script>
import { problemList } from '@/api/oj'
import PageCom from '@/components/PageCom.vue'

export default {
  name: 'ProblemsView',
  components: {
    PageCom
  },
  data() {
    return {
      loading: false,
      currentPage: 1,
      pageSize: 10,
      search: '',
      total: 0,
      problems: []
    }
  },
  mounted() {
    this.fetchProblems()
  },
  methods: {
    async fetchProblems() {
      this.loading = true
      try {
        const params = {
          page: this.currentPage,
          pageSize: this.pageSize,
          keyword: this.search
        }
        
        const response = await problemList(params)
        
        if (response.data.code === 200 ) {
          this.problems = response.data.data.data
          this.total = response.data.data.total
        } else {
          this.$message.error(response.message || '获取问题列表失败')
        }
      } catch (error) {
        this.$message.error('获取问题列表失败')
      } finally {
        this.loading = false
      }
    },
    
    handlePageChange(page) {
      this.currentPage = page
      this.fetchProblems()
    },
    
    handlePageSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
      this.fetchProblems()
    },
    
    handleSearch() {
      this.currentPage = 1
      this.fetchProblems()
    },
    
    formatStats(stats) {
      if (!stats) return '0 (👤0) / 0 (0%)'
      const correctCount = stats.correct_count || 0
      const userCount = stats.user_count || 0
      const submissionCount = stats.submission_count || 0
      const correctRate = stats.correct_rate || 0
      
      return `${correctCount} (👤${userCount}) / ${submissionCount} (${correctRate}%)`
    },
    
    goToProblem(id) {
          this.$router.push(`/problems/${id}`)
    },
  }
}
</script>


<style scoped>
.problems-center-wrapper {
  margin: 0 auto;
  padding: 10px 0 0px 0;
}
.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #222;
}
.problems-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.problems-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.block-card {
  margin-bottom: 10px;
}
.only-bottom-border-table >>> .el-table__header-wrapper th {
  border-bottom: 1px solid #ebeef5 !important;
  
}
.only-bottom-border-table >>> .el-table__body-wrapper td {
  border-bottom: 1px solid #ebeef5 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}
</style> 